<%= turbo_frame_tag @comment, :new_reaction do %>
  <%= form_with model: [ @comment.card, @comment, Reaction.new ],
        class: "reaction reaction__form expanded",
        html: { aria: { label: "New reaction" } },
        data: { controller: "form reaction-emoji", turbo_frame: dom_id(@comment, :reacting), action: "keydown.esc->form#cancel submit->form#preventEmptySubmit submit->form#preventComposingSubmit" } do |form| %>
    <label class="reaction__form-label flex gap" style="--column-gap: 0.4ch;">
      <figure class="reaction__avatar margin-none flex-item-no-shrink">
        <%= avatar_tag Current.user %>
      </figure>

      <%= form.text_field :content, autofocus: true, autocomplete: "off", autocorrect: "off", maxlength: 16,
            pattern: /\S+.*/, class: "input reaction__input txt-small", data: { form_target: "input", reaction_emoji_target: "input", action: "compositionstart->form#compositionStart compositionend->form#compositionEnd" }, aria: { label: "Add a reaction" } %>
    </label>

    <%= render "cards/comments/reactions/menu", comment: @comment %>

    <%= form.button class: "reaction__submit-btn btn btn--circle borderless", type: "submit", data: { form_target: "submit" } do %>
      <%= icon_tag "check-circle" %> <span class="for-screen-reader">Submit</span>
    <% end %>

    <%= link_to card_comment_reactions_path(@comment.card, @comment), role: "button",
          data: { turbo_frame: dom_id(@comment, :reacting), form_target: "cancel" }, class: "reaction__cancel-btn btn btn--circle borderless" do %>
      <%= icon_tag "close-circle" %> <span class="for-screen-reader">Cancel</span>
    <% end %>
  <% end %>
<% end %>
